﻿<!-- 侧滑栏的父层, -->
<div id="sidebarWrap" class="bui-sidebar-wrap">
    <!-- 侧滑菜单 -->
    <div class="bui-sidebar swiperight">
        <img src="images/placeholder-sidebar.jpg" alt="占位图">
    </div>
    <!-- 正文内容 -->
    <div class="bui-page">
        <header class="bui-bar">
            <div class="bui-bar-left">
                <a class="bui-btn" onclick="bui.back();"><i class="icon-back"></i></a>
            </div>
            <div class="bui-bar-main">左侧菜单</div>
            <div class="bui-bar-right">
            </div>
        </header>
        <main>
            <div id="menu" class="menu"><i class="icon-menu"></i></div>
            <div id="uiTab" class="bui-tab">
                <div class="bui-tab-head">
                    <ul class="bui-nav">
                        <!-- 分屏菜单 active 是激活的TAB样式 -->
                        <li class="bui-btn active">Tab1</li>
                        <li class="bui-btn">Tab2</li>
                    </ul>
                </div>
                <div class="bui-tab-main">
                    <ul>
                        <li>

                            <div class="placeholder">
                                <img src="images/swiperight.png" alt="向右滑动">
                                <div class="placeholder-text">
                                    <h3>右滑打开左侧菜单</h3>
                                    <p class="warning-reverse">(提示：该事件请在手机操作！)</p>
                                </div>
                                <div class="placeholder-text">
                                    <h3>右滑打开左侧菜单</h3>
                                    <p class="warning-reverse">(提示：该事件请在手机操作！)</p>
                                </div>
                                <div class="placeholder-text">
                                    <h3>右滑打开左侧菜单</h3>
                                    <p class="warning-reverse">(提示：该事件请在手机操作！)</p>
                                </div>
                                <div class="placeholder-text">
                                    <h3>右滑打开左侧菜单</h3>
                                    <p class="warning-reverse">(提示：该事件请在手机操作！)</p>
                                </div>
                                <div class="placeholder-text">
                                    <h3>右滑打开左侧菜单</h3>
                                    <p class="warning-reverse">(提示：该事件请在手机操作！)</p>
                                </div>

                            </div>
                        </li>
                        <li style="display:none;">
                            第2屏
                        </li>
                    </ul>
                </div>
            </div>
        </main>
    </div>
</div>